<template>
  <div class="home">
    <div class="header">
      <div class="teacher-info-card">
        <img src="@/assets/logo2.png" alt="Logo" class="logo">
        <div class="teacher-info">
          <h2>孙笑川 讲师</h2>
          <p>天津工业大学 软件学院</p>
        </div>
      </div>
    </div>
    <div class="buttons">
      <button class="preview" @click="navigateTo('preview')">
        新建预习 <el-icon class="icon"><Plus /></el-icon>
      </button>
      <button class="homework" @click="navigateTo('homework')">
        新建作业 <el-icon class="icon"><Plus /></el-icon>
      </button>
    </div>
    <Sidebar />
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import Sidebar from '@/components/Sidebar.vue'
import { ElIcon } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

const router = useRouter();

const navigateTo = (route) => {
  router.push(`/${route}`);
};
</script>

<style scoped>
.home {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header {
  width: 100%;
  display: flex;
  justify-content: center;
}

.teacher-info-card {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  width: 90%;
  max-width: 600px;
}

.logo {
  width: 70px;
  height: 70px;
  margin-right: 15px;
}

.teacher-info {
  flex: 1;
}

.buttons {
  margin-top: 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 230px;
  margin-bottom: 20px;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  font-size: 40px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.522);
}

.preview {
  background-color: #3b83f6cb;
  color: white;
}

.homework {
  background-color: #f0a400d5;
  color: white;
}

.icon {
  font-size: 40px;
  margin-right: 10px;
}
</style>
